<template>
  <view class="footer-content" :style="footerStyle">
    <view class="footer-logo">
      <image
        class="logo"
        :src="commonStore.baseImageUrl + 'test-yujia/index/logo-hui.png'"
        mode="widthFix"
      />
    </view>
    <!-- 优势列表 -->
    <view class="advantages">
      <view
        class="advantage-item"
        v-for="item in footerContent"
        :key="item.title"
      >
        <view class="title-box">
          <image :src="commonStore.baseImageUrl + item.icon" mode="widthFix" />

          <text class="title">{{ item.title }}</text>
        </view>
        <text class="desc">{{ item.desc }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useCommonStore } from "@/store";
import { ref } from "vue";

defineProps({
  footerStyle: {
    type: Object,
    default: () => ({}),
  },
});
const commonStore = useCommonStore();
const footerContent = ref([
  {
    title: "门店随心选",
    desc: "全国门店随意上课",
    icon: "test-yujia/index/home-icon.png",
  },
  {
    title: "教练无忧换",
    desc: "300+专业教练守护",
    icon: "test-yujia/index/jiaolian.png",
  },
  {
    title: "课程自由约",
    desc: "24小时自由约课",
    icon: "test-yujia/index/course-icon.png",
  },
]);
</script>



<style lang="scss">
.footer-content {
  padding: 40rpx 30rpx;
  background: #f9f7f2;
  margin-bottom: 50rpx;

  .footer-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 40rpx;

    .logo {
      width: 120rpx;
      height: auto;
    }
  }

  .advantages {
    display: flex;
    gap: 24rpx;
    justify-content: center;

    .advantage-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 12rpx;
      }

      .title-box {
        display: flex;
        align-items: center;
        .title {
          font-size: 24rpx;
          color: #D3D3C3;
          font-weight: 500;
        }
      }
      .desc {
        font-size: 18rpx;
        color: #D3D3C3;
      }
    }
  }
}
</style>
